<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="styles/dzbase.css" />
        <script type="text/javascript" src="scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="scripts/utils.js">
        </script>
        <script type="text/javascript" src="scripts/i18nMessage.js">
        </script>
        <script type="text/javascript">
            Ext.onReady(function(){
                Ext.QuickTips.init();
                
                // turn on validation errors beside the field globally
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var idValue = getPrarmeterValue(window.location, 'id');
                var startPage = getPrarmeterValue(window.location, 'startPage');
                var orderForm = new Ext.FormPanel({
                    labelAlign: 'left',
                    labelWidth: 120, // label settings here cascade unless overridden
                    url: 'OrderServlet?action=1',
                    frame: true,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    },{
                        name: 'customerName',
                        mapping: 'customerName'
                    }, {
                        name: 'customerLinkman',
                        mapping: 'customerLinkman'
                    }, {
                        name: 'customerAddress',
                        mapping: 'customerAddress'
                    }, {
                        name: 'isPrinted',
                        mapping: 'isPrinted'
                    }, {
                        name: 'isConfirmed',
                        mapping: 'isConfirmed'
                    }, {
                        name: 'customerComment',
                        mapping: 'customerComment'
                    }, {
                        name: 'customerEmail',
                        mapping: 'customerEmail'
                    }, {
                        name: 'customerTel',
                        mapping: 'customerTel'
                    }, {
                        name: 'customerMb',
                        mapping: 'customerMb'
                    }]),
                    title: 'Edit order',
                    bodyStyle: 'padding:5px 5px 5px 5px',
                    
                    
                    items: [{
                        id: 'orderId',
                        name: 'id',
                        xtype: 'hidden'
                    },{
						xtype: 'fieldset',
						collapsible: true,
			            title: 'Customer information',
			            autoHeight:true,
						items:[{
								layout: 'column',
								items: [{
									columnWidth:.5,
					                layout: 'form',
									items: [{
										fieldLabel: 'Customer name',
										width: '80%',
				                        name: 'customerName',
										id: 'customerName',
				                        allowBlank: false,
				                        blankText: 'This fieled must be filled out.',
				                        xtype:'textfield',
				                        maxLength: 64,
				                        maxLengthText: 'The length of the text is too long to store.' 
									},{
										fieldLabel: 'Tel',
										width: '80%',
				                        name: 'customerTel',
										id: 'customerTel',
				                        allowBlank: false,
				                        blankText: 'This fieled must be filled out.',
				                        xtype:'textfield',
				                        maxLength: 64,
				                        maxLengthText: 'The length of the text is too long to store.' 
									},{
										fieldLabel: 'Customer email',
				                        name: 'customerEmail',
										width: '80%',
				                        xtype: 'textfield',
                    					vtype:'email',
				                        maxLength: 512,
				                        maxLengthText: 'The length of the text is too long to store.'
									}]
								},{
									columnWidth:.5,
					                layout: 'form',
									items: [{
										fieldLabel: 'Contact man',
										width: '80%',
				                        name: 'customerLinkman',
										id: 'customerLinkman',
				                        allowBlank: false,
				                        blankText: 'This fieled must be filled out.',
				                        xtype:'textfield',
				                        maxLength: 64,
				                        maxLengthText: 'The length of the text is too long to store.'
									},{
										fieldLabel: 'Mobile',
										width: '80%',
				                        name: 'customerMb',
										id: 'customerMb',
				                        allowBlank: false,
				                        blankText: 'This fieled must be filled out.',
				                        xtype:'textfield',
				                        maxLength: 64,
				                        maxLengthText: 'The length of the text is too long to store.' 
									},{
										fieldLabel: 'Customer address',
				                        name: 'customerAddress',
										width: '80%',
				                        allowBlank: false,
							            blankText: 'This fieled must be filled out.',
				                        xtype: 'textarea',
				                        maxLength: 512,
				                        maxLengthText: 'The length of the text is too long to store.'
									}]
							}]
						},{
							fieldLabel: 'Customer comment',
	                        name: 'customerComment',
							width: '90%',
	                        xtype: 'htmleditor',
	                        maxLength: 512,
	                        maxLengthText: 'The length of the text is too long to store.'
						}]
					}],
                    
                    buttons: [{
                        text: 'Save',
                        handler: function(){
                            if (orderForm.getForm().isValid()) {
                                //colorForm.hide();
                                orderForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        //alert(form);
                                        messageTip.msg('Tip', 'Save successfully.');
                                        orderForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        //alert(form);
                                        messageTip.msg('Tip', 'Save unsuccessfully.');
                                        //orderForm.show();
                                    }
                                });
                            }
                        }
                    },{
                        text: 'Next setp',
                        handler: function(){
                            if (orderForm.getForm().isValid()) {
                                //colorForm.hide();
                                orderForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        //alert(form);
                                        messageTip.msg('Tip', 'Save successfully. Go to next step.');
                                        orderForm.getForm().reset();
                                        //orderForm.show();
										
                                        window.setTimeout(function(){
											window.location = 'order_item_edit.html?orderId=' + action.result.id;
										}, '1000');
                                    },
                                    failure: function(form, action){
                                        //alert(form);
                                        messageTip.msg('Tip', 'Save unsuccessfully.');
                                        //orderForm.show();
                                    }
                                });
                            }
                        }
                    },{
						text: 'Reset',
						handler: function(){
							orderForm.getForm().reset();
						}
					}, {
                        text: 'Cancel',
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'order_list.html?startPage=' + startPage;
                            }
                            else {
                                window.location = 'order_list.html';
                            }
                        }
                    }]
                });
				
				orderForm.render('orderDiv');
		
				if(idValue != null){
					document.getElementById('orderId').value = idValue;
					orderForm.getForm().load({url:'OrderServlet?action=3&id=' + idValue, 
											  waitMsg:'Loading...',
											  success: function(form, action){
													
												}});
				}
				/*
				orderForm.getForm().findField('totalPrice').on('focus', function(field){
					var yarnPrice = document.getElementById('yarnPrice').value;
					var weight = document.getElementById('weight').value;
					var processPrice = document.getElementById('processPrice').value;
					var amount = document.getElementById('amount').value;
					var diffCoefficient = document.getElementById('diffCoefficient').value;
					//alert(yarnPrice + ' ' + weight + ' ' + processPrice + ' ' + amount + ' ' + diffCoefficient);
					if(yarnPrice && weight && processPrice && amount && diffCoefficient){
						document.getElementById('totalPrice').value = (yarnPrice * weight +  processPrice * diffCoefficient) * amount;
					}else{
						orderForm.getForm().isValid()
					}
				});
				*/
            });
        </script>
    </head>
    <body>
        <div id="orderDiv"></div>
    </body>
</html>
